<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
    <@head />
    <link href="/assets/css/plugins/iCheck/custom.css" rel="stylesheet">
</head>

<body>
    <@layout>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-content">
                        <form id="form" class="form-horizontal m-t" method="post"
                              action="<#if model?exists>${ctx_admin}/ad/update<#else>${ctx_admin}/ad/add</#if>">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    名称
                                </label>
                                <div class="col-sm-8">
                                    <input type="hidden" name="id" value="${model.id}" />
                                    <input type="text" class="form-control" required="" aria-required="true" name="adName" value="${model.adName}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    位置
                                </label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="positionId"  required="" aria-required="true">
                                        <option value="18">首页大轮播图</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    起止时间
                                </label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <input id="startTime" name="startTime" class="laydate-icon form-control required" required="" aria-required="true" value="<#if model?exists>${model.startTime?string('yyyy-MM-dd HH:mm:ss')}</#if>">
                                        <span class="input-group-addon bg-primary">~</span>
                                        <input id="endTime" name="endTime" class="laydate-icon form-control required" required="" aria-required="true" value="<#if model?exists>${model.endTime?string('yyyy-MM-dd HH:mm:ss')}</#if>">
                                    </div>

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    链接
                                </label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="adLink" name="adLink" placeholder="http://" required="" aria-required="true" value="${model.adLink}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    图片地址
                                </label>
                                <div class="col-sm-8">
                                    <input type="text" id="adCode" name="adCode" value="${model.adCode}"
                                           class="form-control" required="" aria-required="true"
                                           style="display: inline-block; width: auto; vertical-align: middle;">
                                    <span class="btn btn-primary fileinput-button" style="">
                                    <i class="fa fa-cloud-upload"></i>
                                    <span>上传图片</span>
                                    <input id="btn_adCode" type="file" name="file" multiple>
                                </span>

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    是否显示
                                </label>
                                <div class="col-sm-8">
                                    <label class="radio-inline radio i-checks">
                                        <input id="enabled0" type="radio" name="enabled" value="0" <#if model.enabled==false> checked="checked" </#if>>
                                        否
                                    </label>
                                    <label class="radio-inline i-checks">
                                        <input id="enabled1" type="radio" name="enabled" value="1" <#if model.enabled==true> checked="checked" </#if>>
                                        是
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-3 text-center">
                                    <button id="btn-submit" class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

        </div>

    </@layout>

<script src="/assets/js/plugins/iCheck/icheck.min.js"></script>
<script src="/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="/assets/js/plugins/jquery.form/jquery.form.js"></script>
<script src="/assets/js/plugins/laydate/laydate.js"></script>

<script src="/assets/js/plugins/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/assets/js/plugins/javascript-Load-Image/load-image.all.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-ui.js"></script>

    <script type="text/javascript">
        laydate.skin('danlan');
        laydate({
            elem: '#startTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus', //响应事件。如果没有传入event，则按照默认的click
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        });
        laydate({
            elem: '#endTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus', //响应事件。如果没有传入event，则按照默认的click
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        });

        $(function () {
            $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",});


            $('#btn_adCode').fileupload({
                //inputid:'fileupload',//我要实例化哪个标签
                url: '/upload/ad',//服务端的地址
                dataType: 'json',//数据格式，ajax你懂的
                autoUpload: true,//是否选了文件就直接自动上传
                maxNumberOfFiles: 1,//最多同时上传几个文件
                maxFileSize: 5000000,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                //maxChunkSize:10000,//最大接收文件大小
                done: function (e, data) {//上传完了干嘛
                    var res = data.result;
                    if (res.success) {
                        $('#adCode').val(res.url);
                        layer.msg(res.message, {icon: 1, time: 2000}, function () {
                        });
                    } else {
                        layer.msg(res.message, {icon: 2, time: 3000}, function () {
                        });
                    }

                },
                progressall: function (e, data) {//上传过程中，隔段时间就会调起的回调函数，这个东西，主要是用来返回进度的，你看里面的引用，没错，它带回来的参数值，只有total、loaded这种数字。

                },
                processalways: function (e, data) {
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');//不用猜了，就是看看是不是支持jqueryajax上传方式。就是上面说的那个frame东东。


            $("#form").validate({
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        type: 'post',
                        url: form.action,
                        success: function (data) {
                            if (data.success) {
                                layer.msg(data.message, { icon: 1, time: 2000 }, function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.$table.bootstrapTable('destroy');
                                    parent.initTable();
                                    parent.layer.close(index);
                                });
                            } else {
                                layer.msg(data.message, { icon: 2, time: 3000 }, function () { });
                            }
                        },
                        error: function (XmlHttpRequest, textStatus, errorThrown) {
                            layer.msg('error!', { icon: 2, time: 3000 }, function () { });
                        }
                    });
                }
            });

        });
    </script>

</body>

</html>